<template>
  <div class="big">
    <el-table :data="tableData" style="width: 68.9%;text-align: center;" border stripe>
      <el-table-column prop="_id" label="用户编号" width="180"> </el-table-column>
      <el-table-column prop="username" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="pass" label="密码" width="180"> </el-table-column>
      <el-table-column prop="state" label="是否冻结" width="180">
        <template slot-scope="scope" >
          <p v-if="scope.row.state">冻结</p>
          <!-- <p v-if="!scope.row.state">冻结</p> -->
          <p v-else="">未冻结</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="180">
        <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleUnFreeze(scope.row)">解冻</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleFreeze(scope.row)">冻结</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      tableData: [
        {
          _id: "",
          username: "",
          littlename: '',
          pass: '',
          state: false
        },
      ],
    };
  },
  created() {
    this.renderMerchantList();
  },
  methods: {
    async renderMerchantList() {
      let { data } = await axios.get('/admin/getMerchantList');
      this.tableData = data;
    },
    //冻结商人
    async handleFreeze(params) {
      if(params.state == false) {
        let { data } = await axios.post('/admin/freezeMerchant',params);
        params.state = data;
        this.renderMerchantList();
      }
      else {
        alert('该账号已冻结！');
      }
    },
    //解冻商人
    async handleUnFreeze(params) {
      if(params.state == true) {
        let { data } = await axios.post('/admin/unFreezeMerchant',params);
        params.state = data;
        this.renderMerchantList();
      }
      else {
        alert('该账号已解冻！');
      }
    }
  }
};
</script>

<style>
  * {
    text-align: center;
  }
  .big {
    width: 100%;
    height: 100%;
  }
  .el-table {
    margin: 0 auto;
  }
  .el-table th, .el-table tr {
    height: 40px;
    line-height: 40px;
  }
  .has-gutter,.el-table__body {
    width: 100%;
  }
  .el-form-item__content {
    margin-top: 63px;
  }
</style>
